import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    Upload,
} from 'antd';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const onChange = (checkedValues) => {
    console.log('checked = ', checkedValues);
};
const onChangePlatform = (checkedValues) => {
    console.log('checked = ', checkedValues);
};
const options = [
    {
        label: 'Apple',
        value: 'Apple',
    },
    {
        label: 'Pear',
        value: 'Pear',
    },
    {
        label: 'Orange',
        value: 'Orange',
    },
];
const platformOptions = [
    {
        label: '1688',
        value: '1688',
    },
    {
        label: '淘宝',
        value: 'tb',
    },
    {
        label: '拼多多',
        value: 'pdd',
    },
]
const FormDisabledDemo = () => {
    const [componentDisabled, setComponentDisabled] = useState(true);
    const onFormLayoutChange = (values) => {
        console.log('disabled', values);
        // setComponentDisabled(disabled);
    };
    const [form] = Form.useForm();
    // const [form, setForm] = useState({
    //     system: '',
    //     platform: '',
    //     title: '123',
    //     upload: '',
    //     details: '',
    //     url: '',
    //     setting: '',
    //     types: '',
    //     isTimed: '',
    //     timedTransmission: '',
    // })

    return (
        <>
            {/* <Checkbox
        checked={componentDisabled}
        onChange={(e) => setComponentDisabled(e.target.checked)}
      >
        Form disabled
      </Checkbox> */}
            <Form
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 14,
                }}
                layout="horizontal"
                name="time_related_controls"
                form={form}
            >
                <Form.Item label="选择系统：" name="system">
                    <Select>
                        <Select.Option value="demo">分单系统</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="展示平台：" name="platform">
                    <Checkbox>全选</Checkbox>
                    <div>
                        <Checkbox.Group
                            options={platformOptions}
                            onChange={onChangePlatform}
                        />
                    </div>

                </Form.Item>
                <Form.Item label="公告标题：" name="title">
                    <Input
                        placeholder='只支持文本，字数限制再20字以内'
                        disabled={componentDisabled}
                        maxLength={20}
                    />
                </Form.Item>
                <Form.Item label="添加图片：" valuePropName="upload">
                    <Upload action="/upload.do" listType="picture-card">
                        <div>
                            <PlusOutlined />
                            <div
                                style={{
                                    marginTop: 8,
                                }}
                            >
                            </div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item label="公告详情" name="details">
                    <TextArea rows={4} placeholder="只支持文本，限制200个子节" maxLength={20} />
                </Form.Item>

                <Form.Item label="跳转链接" name="url">
                    <Input maxLength={100} placeholder='只可以添加一条' />
                </Form.Item>
                <Form.Item label="投放环境：" name="setting">
                    <Radio.Group>
                        <Radio value="0"> 全部环境投放 </Radio>
                        <Radio value="1"> 正式环境 </Radio>
                        <Radio value="2"> 灰度环境 </Radio>
                        <Radio value="3"> 测试环境 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="环境类型：" name="types" >
                    <Checkbox.Group
                        options={options}
                        onChange={onChange}
                    />
                </Form.Item>


                <Form.Item label="是否需要定时发送：" name="isTimed">
                    <Radio.Group>
                        <Radio value="0">是</Radio>
                        <Radio value="1">否</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="定时发送时间" name="timedTransmission">
                    <RangePicker />
                </Form.Item>
                <Form.Item >
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
            </Form>
        </>
    );
};
export default () => <FormDisabledDemo />;